const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const { entry, htmlPlugins } = require("./dynamicConfig");
module.exports = {
  //设置当前环境 - none（无环境） | development | production
  mode: "none",
  entry,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[contenthash:6].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        //style-loader将css插入到head标签内
        //css-loader将css文件转化为commonjs模块
      },
      {
        //webpack4:file-loader(单个文件)和url-loade(base64，适用于小图片和小图标)
        test: /\.(jpg|png|gif|jpeg)$/,
        type: "asset",
        generator: {
          filename: "img/[name][ext]",
        },
      },
    ],
  },
  plugins: [
    ...htmlPlugins,
    // 模块化显示
    // new BundleAnalyzerPlugin(),
  ],
  //html-loader(将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串)

  //解析模块
  resolve: {
    unsafeCache: true,
    //webpack默认查找机制
    //(1)node_modules/webpack/bin/node_modules
    //(2)node_modeles/webpack/node_modules
    //(3)node_modules

    //文件后缀名查找顺序
    //引入文件的时候，不加后缀名，webpack自动按照默认的查找顺序去匹配文件
    //例如：import a from './a' 优先js文件，如果没有js文件，再去查找css文件
    extensions: [".js", ".json", ".css", "scss"],
    //设置路径别名 ../../
    alias: {
      "@": path.resolve(__dirname, "src"),
      comJS: path.resolve(__dirname, "src/js"),
    },
  },
  //优化配置
  optimization: {
    //分块策略（把指定的公共模块单独分离出来，后续使用该模块，直接引用即可，无需二次打包）
    splitChunks: {
      //缓存组（用于继承/覆盖相同分块配置）
      cacheGroups: {
        //公共模块
        //ajax缓存组，需要提出的公共模块
        ajaxVendors: {
          test: /ajax\.js/i,
          //拆分模块的模式
          chunks: "all", //all（所有模块） | initial（只拆分同步导入模块） | async（只拆分异步模块）
          //最小体积（达到多大体积才会被拆包，默认20kb）
          minSize: 0,
          //拆分模块的最小数量
          minChunks: 2,
          //拆分模块的名称
          name: "ajaxVendors",
          //优先级
          // priority: 10,
        },
        comCssVendors: {
          test: /com\.css/i,
          chunks: "all",
          minSize: 0,
          minChunks: 2,
          name: "comCssVendors",
        },
      },
    },
  },
};
